<template>
  <div>
    <el-dialog title="数据库连接" :close-on-click-modal="false" :visible.sync="databaseFormVisible" :before-close="handelCancel" width="60%">
      <el-scrollbar style="height:100%">
        <znxd-form ref="form" v-model="formData" v-if="databaseFormVisible" :formColumn="formColumn" labelWidth="200px" :formRules="formRules" :initData="initData" :formButtons="formButtons" @handeSave="handeSave" @handelCancel="handelCancel"></znxd-form>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import { add, update } from "@/api/dataset/database.js";
import { selectDictionaryByType } from "@/api/dict";
import { doCreate } from "@/utils/config"; // getDicTab
import dbLink from "./dbLink";
export default {
  components: {},
  data() {
    return {
      // 数据库类型字典
      typeOptions: [
        // {
        //   label: "mysql",
        //   value: "mysql"
        // },
        // {
        //   label: "oracle",
        //   value: "oracle"
        // },
        // {
        //   label: "sqlserver",
        //   value: "sqlserver"
        // },
        // {
        //   label: "postgresql",
        //   value: "postgresql"
        // },
        // {
        //   label: "dm",
        //   value: "dm"
        // }
      ],
      // 状态字典
      statusOptions: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "禁用",
          value: 2
        }
      ],
      // 表单配置
      formColumn: [],
      formRules: {
        datasourceName: [{ required: true, message: "不能为空" }],
        datasource: [{ required: true, message: "不能为空" }],
        jdbcUrl: [{ required: true, message: "不能为空" }],
        jdbcUsername: [{ required: true, message: "不能为空" }],
        jdbcPassword: [{ required: true, message: "不能为空" }],
        status: [{ required: true, message: "不能为空" }]
      },
      formData: {},
      formButtons: [
        {
          label: "保存",
          type: "primary",
          handelClick: (row) => {
            this.handeSave(row);
          }
        },
        {
          label: "取消",
          plain: true,
          handelClick: () => {
            this.handelCancel();
          }
        }
      ]
    };
  },
  props: {
    databaseFormVisible: Boolean,
    initData: Object
  },
  watch: {
    initData(val) {
      this.formData = {
        ...val
      };
    },
    "formData.datasource": function () {
      this.initForm();
    }
  },
  methods: {
    initForm() {
      const _this = this;
      this.formColumn = [
        {
          name: "datasourceName",
          label: "数据源名称",
          type: "input"
        },
        {
          name: "datasource",
          label: "数据源类型",
          type: "select",
          options: this.typeOptions,
          handleChange: function (formData) {
            // console.log("handleChange formData", formData);
            // _this.initForm();
            setTimeout(function () {
              // console.log("1");
              _this.$refs.form.initComponent();
            }, 2000);
          }
        },
        {
          name: "comments",
          label: "数据源描述",
          type: "textarea"
        },
        {
          name: "jdbcUrl",
          label: "JDBC URL",
          type: "textarea",
          maxLength: 500
        },
        {
          name: "jdbcUsername",
          label: "用户名",
          type: "input"
        },
        {
          name: "jdbcPassword",
          label: "密码",
          type: "input"
        }
      ];

      if (this.formData.datasource === "hive") {
        let hiveForm = [
          {
            name: "defaultFs",
            label: "fs.defaultFs",
            type: "input"
          },
          {
            name: "haRpcAddress1",
            label: "dfs.namenode.rpc-address1",
            type: "input"
          },
          {
            name: "haRpcAddress2",
            label: "dfs.namenode.rpc-address2",
            type: "input"
          },
          {
            name: "namenodes",
            label: "dfs.ha.namenodes",
            type: "input"
          },
          {
            name: "nameservices",
            label: "dfs.nameservices",
            type: "input"
          }
        ];
        this.formColumn = [...this.formColumn, ...hiveForm];
      }

      let bottomForm = [
        {
          name: "status",
          label: "是否启用",
          type: "radio",
          options: this.statusOptions
        },
        {
          name: "available",
          label: "测试",
          type: "view",
          template: dbLink
        }
      ];
      this.formColumn = [...this.formColumn, ...bottomForm];
    },
    handeSave(formData) {
      let well = this.$refs.form.validateForm();
      if (!well) return false;
      // console.log("handle formData", formData);
      let saveEvent;
      if (this.initData && this.initData.id) {
        saveEvent = update;
      } else {
        saveEvent = add;
      }
      saveEvent(formData)
        .then((res) => {
          let data = res.data;
          if (data.code === 200) {
            this.$message({
              message: data.msg || "操作成功",
              type: "success"
            });
            this.handelCancel();
          } else {
            // this.$message.error(data.msg);
            this.$message({
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(() => {
          // this.$message.error(error);
          this.$message({
            message: "操作失败",
            type: "error"
          });
        });
    },
    handelCancel() {
      this.$emit("close");
    },
    // import { selectDictionaryByType } from "@/api/dict";
    getDBType() {
      const _this = this;
      selectDictionaryByType({ type: "dbType" })
        .then((res) => {
          let data = res.data;
          if (data.code === 200) {
            let options = [];
            data.data.map((x) => {
              options.push({ label: x.value, value: x.value });
            });
            _this.typeOptions = options;
            _this.initForm();
          } else {
            // this.$message.error(data.msg);
          }
        })
        .catch(() => {
          // this.$message.error("操作失败");
        });
    }
  },
  mounted() {
    this.formData = {
      ...this.initData
    };
    this.getDBType();
    // this.initForm();
  }
};
</script>
<style lang="scss" scoped>
</style>
